<template>
  <div>
    <p>
      <el-button type="warning" @click="quit()">离职列表</el-button>
    </p>
    <div class="quit_box">
      <div class="box_left">
        <div id="left_top"></div>
        <div id="left_bottom"></div>
      </div>
      <div class="box_right">
        <div class="right_top">
          <div id="left"></div>
          <div id="right"></div>
        </div>
        <div id="right_bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    setTimeout(() => {
      this.drawLine1();
      this.drawLine2();
      this.drawLine3();
      this.drawLine4();
      this.drawLine5();
    }, 500);
  },
  methods: {
    //离职列表
    quit() {
      this.$router.push("/EmployeeLiZhiList");
    },
    drawLine3() {
      let myChart = this.$echarts.init(document.getElementById("left"));
      var m2R2Data = [
        {
          value: 335,
          legendname: "管理部",
          name: "管理部  335",
          itemStyle: { color: "#8d7fec" }
        },
        {
          value: 310,
          legendname: "财务部",
          name: "财务部  310",
          itemStyle: { color: "#5085f2" }
        },
        {
          value: 234,
          legendname: "采购部",
          name: "采购部  234",
          itemStyle: { color: "#e75fc3" }
        },
        {
          value: 154,
          legendname: "经营部",
          name: "经营部  154",
          itemStyle: { color: "#f87be2" }
        },
        {
          value: 335,
          legendname: "生产部",
          name: "生产部  335",
          itemStyle: { color: "#f2719a" }
        },
        {
          value: 335,
          legendname: "技术部",
          name: "技术部  335",
          itemStyle: { color: "#fca4bb" }
        },
        {
          value: 335,
          legendname: "质量部",
          name: "质量部  335",
          itemStyle: { color: "#f59a8f" }
        },
        {
          value: 335,
          legendname: "客车事业部",
          name: "客车事业部  335",
          itemStyle: { color: "#fdb301" }
        },
        {
          value: 335,
          legendname: "一车间",
          name: "一车间  335",
          itemStyle: { color: "#57e7ec" }
        },
        {
          value: 335,
          legendname: "二车间",
          name: "二车间  335",
          itemStyle: { color: "#cf9ef1" }
        },
        {
          value: 335,
          legendname: "三车间",
          name: "三车间  335",
          itemStyle: { color: "#57e7ec" }
        },
        {
          value: 335,
          legendname: "四车间",
          name: "四车间  335",
          itemStyle: { color: "#cf9ef1" }
        }
      ];

      myChart.setOption({
        title: {
          text: "",
          subtext: "各部门离职占比",
          x: "1%",
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function(parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "70%",
          align: "left",
          top: "middle",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#8C8C8C"
          },
          height: 250
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["35%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function(parms) {
                  return parms.data.legendname;
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            data: m2R2Data
          }
        ]
      });
    },
    drawLine4() {
      let myChart = this.$echarts.init(document.getElementById("right"));
      var m2R2Data1 = [
        {
          value: 335,
          legendname: "#REF",
          name: "REF  335",
          itemStyle: { color: "#8d7fec" }
        },
        {
          value: 310,
          legendname: "职业前景不明朗",
          name: "职业前景不明朗  310",
          itemStyle: { color: "#5085f2" }
        },
        {
          value: 234,
          legendname: "夫妻两地分居",
          name: "夫妻两地分居  234",
          itemStyle: { color: "#e75fc3" }
        },
        {
          value: 154,
          legendname: "离家较远",
          name: "离家较远  154",
          itemStyle: { color: "#f87be2" }
        },
        {
          value: 335,
          legendname: "旷工除名",
          name: "旷工除名  335",
          itemStyle: { color: "#f2719a" }
        },
        {
          value: 335,
          legendname: "不公平对待",
          name: "不公平对待  335",
          itemStyle: { color: "#fca4bb" }
        },
        {
          value: 335,
          legendname: "找到新工作",
          name: "找到新工作  335",
          itemStyle: { color: "#f59a8f" }
        },
        {
          value: 335,
          legendname: "个人原因",
          name: "个人原因  335",
          itemStyle: { color: "#fdb301" }
        },
        {
          value: 335,
          legendname: "公司解聘",
          name: "公司解聘  335",
          itemStyle: { color: "#57e7ec" }
        }
      ];

      myChart.setOption({
        title: {
          text: "",
          subtext: "离职原因占比",
          x: "1%",
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function(parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "72%",
          align: "left",
          top: "middle",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#8C8C8C"
          },
          height: 250
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["39%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function(parms) {
                  return parms.data.legendname;
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            data: m2R2Data1
          }
        ]
      });
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("left_bottom"));
      // 绘制图表
      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          subtext: "不同学历离职人数占比",
          x: "1%",
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} <br/>{c} ({d}%)"
        },
        legend: {
          align: "right",
          right: 10,
          textStyle: {
            color: "#ccc"
          },
          itemWidth: 10,
          itemHeight: 10,
          y: "3%",
          data: ["高中", "大专", "本科", "研究生"]
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 85, name: "高中" },
              { value: 50, name: "大专" },
              { value: 54, name: "本科" },
              { value: 35, name: "研究生" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("right_bottom"));
      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          subtext: "各部门离职人数",
          x: "1%",
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          align: "right",
          right: 10,
          textStyle: {
            color: "#ccc"
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
          y: "2%"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "管理部",
              "采购部",
              "经营部",
              "客车事业部",
              "技术部",
              "财务部",
              "生产部",
              "质量部"
            ],
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} %"
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ccc",
                width: 1,
                type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#063374"
              }
            }
          }
        ],
        series: [
          {
            //name: "小学",
            type: "bar",
            data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
            barWidth: 5, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgb(147,170,207)"
                  }
                ]),
                opacity: 1
              }
            }
          }
        ]
      });
    },
    drawLine5() {
      let myChart = this.$echarts.init(document.getElementById("left_top"));

      // 关于“省优质幼儿园评选”的投票
      var chartData = [10, 28, 15, 6, 17, 8, 18, 28, 15, 6, 17, 8];
      var chartName = [
        "管理部",
        "财务部",
        "采购部",
        "经营部",
        "生产部",
        "技术部",
        "质量部",
        "客车事业部",
        "一车间",
        "二车间",
        "三车间",
        "四车间"
      ];
      // var unit='亿元';
      var myColor = ["#FFA483", "#F97F53", "#F45922"];
      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          subtext: "各部门离职比率",
          x: "1%",
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        grid: {
          left: "2%",
          right: "10%",
          bottom: "0%",
          top: "10%",
          containLabel: true
        },
        xAxis: [
          {
            show: false
          },
          {
            show: false
          }
        ],
        yAxis: {
          type: "category",
          inverse: true,
          show: false
        },

        series: [
          //亮色条 百分比
          {
            show: true,
            type: "bar",
            barGap: "-100%",
            barWidth: "10%",
            z: 2,
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000",
                  fontSize: 12
                },
                position: "right",
                formatter: function(data) {
                  return chartData[data.dataIndex].toFixed() + "%";
                }
              }
            },
            data: chartData
          },
          //年份
          {
            show: true,
            type: "bar",
            xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: "-100%",
            barWidth: "10%",
            itemStyle: {
              normal: {
                barBorderRadius: 200,
                color: "transparent"
              }
            },
            label: {
              normal: {
                show: true,
                position: [0, "-15"],
                textStyle: {
                  fontSize: 14,
                  color: "#333"
                },
                formatter: function(data) {
                  return chartName[data.dataIndex];
                }
              }
            },
            data: chartData
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
p {
  height: 45px;
  width: 98%;
  padding: 0 1%;
  background: $white;
  margin-bottom: 10px;
  text-align: right;
  padding-top: 5px;
}
.quit_box {
  height: 600px;
  width: 98%;
  padding: 0 1%;
  display: flex;
  justify-content: space-between;
  .box_left {
    width: 30%;
    #left_top {
      height: 300px;
    }
    #left_bottom {
      height: 290px;
      margin-top: 10px;
    }
  }
  .box_right {
    width: 69%;
    .right_top {
      height: 300px;
      display: flex;
      justify-content: space-between;
      #left {
        width: 46%;
        background: $white;
      }
      #right {
        width: 53%;
        background: $white;
      }
    }
    #right_bottom {
      height: 290px;
      margin-top: 10px;
    }
  }
}
</style>